<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
/*公共样式*/
*{padding:0; margin:0;}
ul{list-style:none;}
.clearfix::before,.clearfix::after{
    clear: both;
    display: table;
    content: "";
}
img{
    width: 100px;
    height: auto;
}
.demo{
    background: black;
    width: 100%;
    font-size: 12px;
}
.demo ul{
    /*外层盒子宽高都可以随意改动*/
    width: 80%;
    height: 200px;
    margin: 50px auto;
    background:pink;
}
.demo li{
    width: 25%;
    height: 100%;
    text-align:center;
}
/*demo1的代码，取巧方式*/
.demo1 li{
    float: left;  
    font-size:0;
}
.demo1 .txt,
.demo1 .vam{
    display:inline-block;
    vertical-align:middle;
    background:gray;
    font-size:12px;
    *display:inline;
    *zoom:1;
 }
.demo1 .vam{
    height:100%;
}
/*demo2的代码，diaplay:table方式*/
.demo2 ul{
    display: table;/*主要代码*/
    *position: relative;  /*for ie67*/
    overflow: hidden; 
}
.demo2 li{
    /*主要代码*/
    display: table-cell;
    vertical-align: middle;
}
/*demo3的代码，子绝父相方式，绝对定位定位到50%的位置（盒子），再回来自身一半的位置（内容）*/
.demo3 li{
    position: relative;
    float: left;
}
.demo3 .center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/*demo4的代码，弹性布局display:flex*/
.demo4 ul{
    display: flex;
}
.demo4 ul li{
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
}
</style>    
</head>
<body>

<div class="demo demo1">
	<ul class="clearfix">
    	<li>
        	<div class="txt">
            	<p>一排内容</p>
            </div>
            <div class="vam"></div>
        </li>
        <li>
        	<div class="txt">
                <p>二排内容</p>
                <p>二排内容</p>
            </div>
            <div class="vam"></div>
        </li>
        <li>
        	<div class="txt">
                <p>两排内容加一个图片</p>
                <p>两排内容加一个图片</p>
                <img src="img/img01.jpg" alt="" />
            </div>
            <div class="vam"></div>
        </li>
        <li>
            <div class="txt">
                <img src="img/img01.jpg" alt="" />
            </div>
            <div class="vam"></div>
        </li>
    </ul>	
</div>
<div class="demo demo2">
    <ul class="clearfix">
        <li><p>demo2的文字</p><p>demo2的文字</p><img src="img/img01.jpg" alt="" /></li><li>
            <p>demo2的文字</p>
            <img src="img/img01.jpg" alt="" />
            <img src="img/img01.jpg" alt="" />
        </li><li>
            <img src="img/img01.jpg" alt="" />
            <img src="img/img01.jpg" alt="" />
            <img src="img/img01.jpg" alt="" />
        </li><li>
            <img src="img/img01.jpg" alt="" />
            <img src="img/img01.jpg" alt="" />
            <img src="img/img01.jpg" alt="" />
        </li>
    </ul>
</div>
<div class="demo demo3">
    <ul>
        <li><div class="center">demo3的文字</div></li>
        <li><div class="center">demo3的文字<img src="img/img01.jpg" alt="" /></div></li>
        <li><div class="center">demo3的文字<img src="img/img01.jpg" alt="" /><img src="img/img01.jpg" alt="" /></div></li>
        <li><div class="center">demo3的文字</div></li>
    </ul>
</div>
<div class="demo demo4">
    <ul>
        <li><p>demo4的文字</p><img src="img/img01.jpg" alt="" /><img src="img/img01.jpg" alt="" /></li>
        <li>demo4的文字</li>
        <li>demo4的文字</li>
        <li>demo4的文字</li>
    </ul>
</div>
</body>
</html>
